@rem: 40rem;
body,figure,p {
  padding:0;
  margin:0;

}
html,body{height:100%;overflow:hidden};
body {
  position: relative;
}
img {
  border: 0;
}
//fonts
@font-face {
  font-family: 'CoreCircusPierrot2';
  src: url('../../fonts/2DA5DD_0_0.eot');
  src: url('../../fonts/2DA5DD_0_0d41d.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/2DA5DD_0_0.woff2') format('woff2'),
  url('../../fonts/2DA5DD_0_0.woff') format('woff'),
  url('../../fonts/2DA5DD_0_0.ttf') format('truetype');
}

@font-face {
  font-family: 'Courgette';
  src: url('../../fonts/Courgette-Regular-webfont.eot');
  src: url('../../fonts/Courgette-Regular-webfontd41d.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Courgette-Regular-webfont.woff2') format('woff2'),
  url('../../fonts/Courgette-Regular-webfont.woff') format('woff'),
  url('../../fonts/Courgette-Regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'Quantico';
  src: url('../../fonts/Quantico-Bold-webfont.eot');
  src: url('../../fonts/Quantico-Bold-webfontd41d.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Quantico-Bold-webfont.woff2') format('woff2'),
  url('../../fonts/Quantico-Bold-webfont.woff') format('woff'),
  url('../../fonts/Quantico-Bold-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
//平板电脑
@media all and (min-width:1536px) and (min-height:2048px) {
  .countDown {
    right: 6.7rem !important;
    top: 0.5rem !important;
  }
}
//(min-width:2048px) and (min-height:1536px) and (orientation:landscape)
@media all and (min-width:1536px) and (orientation:landscape) {
  .fans {
    left: 2.5rem !important;
  }
  .court {
    left: -34rem !important;
  }
  .barket {
    left: -17rem !important;
  }
}
//公用库

//bottom：0
.bottom {
  top:100%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.fame {
  width:100%;
  position: absolute;
  left:0;
  top:0;
  transition: all 0.4s ease-in;
  section {
    position: relative;
  }
}
//大盒子
.playPage {
  width: 100%;
  //height: 100%;
  position: relative;
}
//计分板
.game-info {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 5;
  width: 4.6rem;
  height: 6.25rem;
  -webkit-transform-origin: center;
  transform-origin: center;
  &.flip {
    -moz-animation:rotateY180 .35s ease-in;
    -ms-animation:rotateY180 .35s ease-in;
    -o-animation:rotateY180 .35s ease-in;
    -webkit-animation: rotateY180 .35s ease-in;
    animation: rotateY180 .35s ease-in;
    .back {
      //display: block;
    }
  }
  .name {
    position: relative;
    width: 100%;
    height: 2.65rem;
    background: #d2d2d2;
    &:before {
      content: '';
      position: absolute;
      top: 0.125rem;
      left: 0.15rem;
      width: 100%;
      height: 2.65rem;
      background: #f7f7f7;
    }
    &:after {
      content: 'pts';
      position: absolute;
      top: 1.8rem;
      right: 0.25rem;
      z-index: 1;
      color: #eda949;
      font-family: 'Courgette';
      font-size: 0.75rem;
      transform: rotate(-25deg);
      -webkit-transform: rotate(-25deg);
      letter-spacing: -0.05rem;
    }
    span {
      display: none;
      padding: 0.25rem 0rem;
      color: #d8583a;
      font-family: 'CoreCircusPierrot2';
      font-size: 1.8rem;
      font-weight: 400;
      line-height: 1.2em;
      text-align: center;
      text-indent: -0.25rem;
      letter-spacing: -0.35rem;
      position: relative;
      z-index: 1;
    }
  }
  .points {
    width: 100%;
    height: 2.6rem;
    background: #b5391c;
    color: #fff;
    font-family: 'Quantico';
    font-size: 1.75rem;
    text-align: center;
    &:before {
      content: '';
      position: absolute;
      top: 2.775rem;
      left: 0.15rem;
      width: 2.15rem;
      height: 2.6rem;
      background: #c64b2e;
    }
    &:after {
      content: '';
      position: absolute;
      top: 2.775rem;
      left: 2.6rem;
      width: 2.15rem;
      height: 2.6rem;
      background: #c64b2e;
    }
    span {
      position: relative;
      top: 0.175rem;
      left: 0.525rem;
      z-index: 1;
      letter-spacing: 1.5rem;
    }
  }
  .throws {
    width: 100%;
    height: 0.5rem;
    background: #d2d2d2;
    color: #666;
    font-family: 'Quantico';
    font-size: 0.6rem;
    text-align: center;
    &:before {
      content: '';
      position: absolute;
      top: 5.375rem;
      left: 6/@rem;
      width: 100%;
      height: 0.5rem;
      background: #f7f7f7;
    }
    &>span {
      position: relative;
      left: 9/@rem;
      z-index: 1;
      line-height: 43/@rem;
    }
  }
  .back {
    //display: none;
    position: absolute;
    left: -0.1rem;
    top: -0.2rem;
    width: 4.9rem;
    height: 6.25rem;
    background: url("../../image/playPage/bg/bg_section3.gif");
    -webkit-border-radius: 20/@rem;
    -moz-border-radius:20/@rem;
    border-radius:20/@rem;
    z-index: 10;
    opacity: 0;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    box-shadow: 0 0 5/@rem rgba(0,0,0,0.25);
    .musicPlayer {
      width:100%;
      height:100%;
      position: relative;
      overflow: hidden;
      &.stop {
        .pole {
          -webkit-animation: rotateZ30 0.3s ease-in forwards;
          animation: rotateZ30 0.3s ease-in forwards;
        }
        .cd {
          -webkit-animation-play-state:paused;
          animation-play-state:paused;
        }
      }
      .pole {
        width: 1rem;
        height: 2.1rem;
        position: absolute;
        left: 53%;
        top: -0.1rem;
        transform-origin: 20% 10%;
        transform: rotateZ(-5deg);
        z-index: 2;
      }
      .cd {
        position: absolute;
        width: 3.5rem;
        height: 3.5rem;
        top: 0.8rem;
        left: 0.7rem;
        background: url(../../image/playPage/music.png) no-repeat;
        background-size: cover;
        border: 0.125rem solid rgba(220, 220, 220, 0.5);
        border-radius: 50%;
        -webkit-animation: rotateZ360 3s linear infinite;
        animation: rotateZ360 3s linear infinite;
        .musicImg {
          position: absolute;
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .music-control {
        position: absolute;
        width: 4.9rem;
        height: 1.5rem;
        top:100%;
        transform: translateY(-112%);
        a {
          display: block;
          position: absolute;
          top: 50%;
          background: rgba(25, 19, 0, 0.93);
          border: 0.2rem solid #489b4c;
          box-shadow: 0 0 5/@rem rgba(0,0,0,0.4);
          border-radius: 50%;
          //img {
          //  display: block;
          //}
        }
        .prev,.next {
          width:1rem;
          height:1rem;
          transform: translateY(-50%);
          img {
            position: absolute;
            width: 0.5rem;
            height: 0.5rem;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
          }
        }
        .prev {
          left:  0.2rem;
        }
        .next {
          right:  0.2rem;
        }
        .cont {
          width:1.2rem;
          height:1.2rem;
          left: 50%;
          transform: translate(-50%,-50%);
          img {
            position: absolute;
            width: 0.6rem;
            height: 0.6rem;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
          }
        }
      }
    }
    .music {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -1.25rem 0  0 -1.25rem;
      width: 2.5rem;
      height: 2.5rem;
      transform-origin: center;
      animation: rotateZ360 5s linear infinite;
      img {
        width:100%;
      }
    }
  }
}

[data-player="1"] .game-info .name .player-1 {
  display: block;
}
[data-player="2"] .game-info .name .player-2 {
  display: block;
}
[data-player="3"] .game-info .name .player-3 {
  display: block;
}
[data-player="4"] .game-info .name .player-4 {
  display: block;
}
[data-player="5"] .game-info .name .player-5 {
  display: block;
}
//倒计时
[mode = '2'] .countDown {
  display: block;
}
.countDown {
  display: none;
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.5rem;
  background: url(../../image/playPage/timg.jpg);
  background-size: 100%;
  position: absolute;
  right: 1.5rem;
  top: 0.5rem;
  border-radius: 50%;
  text-align: center;
  color: #FF9800;
  font-family: 'Quantico';
  z-index: 10;
  .line {
    display: none;
    width: 1.75rem;
    height: 0.075rem;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 1.7rem;
    border-radius: 20/@rem;
    transform-origin: right center;
    box-shadow: 0 0 0.2rem orange;
  }
  &.start .line{
    display: block;
    -webkit-animation: rotateZ360 1s linear infinite;
    animation: rotateZ360 1s linear infinite;
  }
}

//摇杆
.controlBox {
  position: absolute;
  width: 10rem;
  height: 10rem;
  right: -1rem;
  bottom: -1.5rem;
  .control {
    position: absolute;
    left: 50%;
    top:50%;
    width: 6rem;
    height: 6rem;
    border: 3/@rem solid rgba(255,255,255,0.3);
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    transform: translate(-50%,-50%);
    .ball-wrap {
      width: 1.8rem;
      height: 1.8rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      .control-ball {
        position: absolute;
        width: 100%;
      }
    }
  }
}
//portrait
.portrait {
  .playPage-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    //background-color: #fff;
    //background-image: url("../../image/playPage/logo3.jpg"),url("../../image/playPage/bg/bg_section3.gif");
    //background-repeat: no-repeat,repeat;
    //background-size: 100%;
    //background-position: 0/@rem -287/@rem;
    background: #fff url("../../image/playPage/bg/bg_section2.gif");

    .fans {
      position: absolute;
      left: -0.5rem;
      bottom: 10rem;
      width: 100%;
      height: 5.45rem;
      overflow: hidden;
      transform: rotateZ(5deg);
      .fan {
        width: 2.3rem;
        height: 5.45rem;
        float: left;
        -webkit-transform-origin: 50% 80%;
        transform-origin: 50% 80%;
      }
      .fan-1 {
        margin-left: 2rem;
        -webkit-animation: fan-1 1.5s ease infinite alternate;
        animation: fan-1 1.5s ease infinite alternate;
      }
      .fan-2 {
        margin-left: -0.5rem;
        -webkit-animation: fan-2 1s ease infinite alternate;
        animation: fan-2 1s ease infinite alternate;
      }
      .fan-3 {
        margin-left: -1.2rem;
        -webkit-animation: fan-3 1.5s ease infinite;
        animation: fan-3 1.5s ease infinite;
      }
      .fan-4 {
        margin-left: -1.2rem;
        -webkit-animation: fan-4 1s ease infinite alternate;
        animation: fan-4 1s ease infinite alternate;
      }
      .fan-5 {
        margin-left: -1rem;
        -webkit-animation: fan-5 2s ease infinite alternate;
        animation: fan-5 2s ease infinite alternate;
      }
      .fan-6 {
        margin-left: -0.75rem;
        -webkit-animation: fan-1 1.2s ease infinite alternate;
        animation: fan-1 1.2s ease infinite alternate;
      }
      .fan-7 {
        margin-left: -1rem;
        -webkit-animation: fan-1 1.1s ease infinite alternate;
        animation: fan-1 1.1s ease infinite alternate;
      }
      .fan-8 {
        margin-left: -1.5rem;
        -webkit-animation: fan-2 1s ease infinite alternate;
        animation: fan-2 1s ease infinite alternate;
      }
      .fan-9 {
        margin-left: -1rem;
        -webkit-animation: fan-1 1.5s ease infinite alternate;
        animation: fan-1 1.5s ease infinite alternate;
      }
      .fan-10 {
        margin-left: -1rem;
        -webkit-animation: fan-4 1s ease infinite alternate;
        animation: fan-4 1s ease infinite alternate;
      }
    }
    .court {
      width: 48.35rem;
      height: 26rem;
      position: absolute;
      left: -268%;
      bottom: 1%;
      transform-origin: bottom;
      transform: rotateX(-76deg) rotateY(25deg) rotateZ(63deg);
      img {
        height: 100%;
      }
    }
    .barket {
      width: 46.35rem;
      height: 19rem;
      position: absolute;
      left: -19.4rem;
      bottom: 1.25rem;
      overflow: hidden;
      .bk-field {
        width: 5rem;
        height: 10rem;
        position: absolute;
        transform: translate(28.75rem, 1.1rem);
        z-index: 0;
      }
      .bk-net {
        position: absolute;
        width: 1.8rem;
        left: 30.4rem;
        bottom: 13.3rem;
        z-index: 6;
      }
      &.goal .bk-net {
        //basket-net
        -webkit-animation: goal-p 1.5s ease;
        animation: goal-p 1.5s ease;
      }
      .bk-bar {
        position: absolute;
        width: 5rem;
        height: 9rem;
        transform: translate(28.75rem, -1.05rem);
        z-index: 7;
      }
      .player {
        position: absolute;
        z-index: 8;
        width: 2.4rem;
        height: 8.625rem;
        transform: translate(21.75rem, 9.5rem) rotate3d(0, 1, 1, 5deg);
        &> * {
          position: absolute;
          left: 50%;
          bottom: 0;
          background-repeat: no-repeat;
          background-size: 100%;
          transform: translateX(-50%);
        }
      }
      .ball-wrapper {
        position: absolute;
        z-index: 5;
        width: 2.275rem;
        height: 2.275rem;
        transform: translate(22.175rem, 10rem);
        .ball {
          position: absolute;
          width: 100%;
        }
      }
    }
  }
}
//landscape
.landscape {
  .playPage-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    //background: #fff url("../../image/playPage/bg/bg_section3.gif");
    //background-color: #fff;
    //background-image: url("../../image/playPage/logo3.jpg"),url("../../image/playPage/bg/bg_section3.gif");
    //background-repeat: no-repeat,repeat;
    //background-size: 100%;
    //background-position: 0rem -24.175rem;
    background: #fff url("../../image/playPage/bg/bg_section2.gif");

    .fans {
      position: absolute;
      left: 6.5rem;
      bottom: 1.5rem;
      width: 100%;
      height: 5.45rem;
      overflow: hidden;
      transform: rotateZ(5deg);
      .fan {
        width: 2.3rem;
        height: 5.45rem;
        float: left;
        -webkit-transform-origin: 50% 80%;
        transform-origin: 50% 80%;
      }
      .fan-1 {
        margin-left: 2rem;
        -webkit-animation: fan-1 0.8s ease infinite alternate;
        animation: fan-1 0.8s ease infinite alternate;
      }
      .fan-2 {
        margin-left: -0.5rem;
        -webkit-animation: fan-2 1s ease infinite alternate;
        animation: fan-2 1s ease infinite alternate;
      }
      .fan-3 {
        margin-left: -1.2rem;
        -webkit-animation: fan-3 1.5s ease infinite;
        animation: fan-3 1.5s ease infinite;
      }
      .fan-4 {
        margin-left: -1.2rem;
        -webkit-animation: fan-4 1s ease infinite alternate;
        animation: fan-4 1s ease infinite alternate;
      }
      .fan-5 {
        margin-left: -1rem;
        -webkit-animation: fan-5 2s ease infinite alternate;
        animation: fan-5 2s ease infinite alternate;
      }
      .fan-6 {
        margin-left: -0.75rem;
        -webkit-animation: fan-1 1.2s ease infinite alternate;
        animation: fan-1 1.2s ease infinite alternate;
      }
      .fan-7 {
        margin-left: -1rem;
        -webkit-animation: fan-1 1.1s ease infinite alternate;
        animation: fan-1 1.1s ease infinite alternate;
      }
      .fan-8 {
        margin-left: -1.5rem;
        -webkit-animation: fan-2 1s ease infinite alternate;
        animation: fan-2 1s ease infinite alternate;
      }
      .fan-9 {
        margin-left: -1rem;
        -webkit-animation: fan-1 0.8s ease infinite alternate;
        animation: fan-1 0.8s ease infinite alternate;
      }
      .fan-10 {
        margin-left: -1rem;
        -webkit-animation: fan-4 1s ease infinite alternate;
        animation: fan-4 1s ease infinite alternate;
      }
    }
    .court {
      width: 48.35rem;
      height: 21rem;
      position: absolute;
      left: -105%;
      bottom: -33%;
      transform-origin: bottom;
      transform: rotateX(-76deg) rotateY(25deg) rotateZ(63deg);
      img {
        height: 100%;
      }
    }
    .barket {
      width: 46.35rem;
      height: 16rem;
      position: absolute;
      left: -13rem;
      bottom: -3rem;
      overflow: hidden;
      .bk-field {
        width: 5rem;
        height: 10rem;
        position: absolute;
        transform: translate(27.75rem, 1.1rem);
        z-index: 0;
      }
      &.goal .bk-net {
        //basket-net
        -webkit-animation: goal-l 1.5s ease;
        animation: goal-l 1.5s ease;
      }
      .bk-net {
        position: absolute;
        width: 2rem;
        transform: translate(29.28rem,3.98rem);
        z-index: 6;
      }
      .bk-bar {
        position: absolute;
        width: 5rem;
        height: 9rem;
        transform: translate(27.75rem,-1.05rem);
        z-index: 7;
      }
      .player {
        position: absolute;
        z-index: 8;
        width: 2.4rem;
        height: 8.625rem;
        transform: translate(21.75rem, 8.2rem) rotate3d(0, 1, 1, 5deg);
        &> * {
          position: absolute;
          left: 50%;
          bottom: 0;
          background-repeat: no-repeat;
          background-size: 100%;
          transform: translateX(-50%);
        }
      }
      .ball-wrapper {
        position: absolute;
        z-index: 5;
        width: 2.275rem;
        height: 2.275rem;
        transform: translate(22.175rem, 8.675rem);
        .ball {
          position: absolute;
          width: 100%;
        }
      }
    }
  }
}


//player
[data-player = '2'] .player {
  height: 8rem !important;
}
[data-player = '1'] .barket .player .legs {
  bottom: 0;
  width: 96/@rem;
  height: 130/@rem;
  background-image: url(../../image/playPage/player-1/legs.svg);
}
[data-player = '1'] .barket .player  .hands {
  bottom: 121/@rem;
  left: 56%;
  width: 96/@rem;
  height: 170/@rem;
  background-image: url(../../image/playPage/player-1/hands.svg);
}
[data-player = '1'] .barket .player  .body {
  bottom: 16/@rem;
  width: 96/@rem;
  height: 287/@rem;
  background-image: url(../../image/playPage/player-1/body.svg);
}
[data-player = '2'] .barket .player .legs {
  bottom: 0;
  width: 1.9rem;
  height: 3.5rem;
  background-image: url(../../image/playPage/player-2/legs.svg);
}
[data-player = '2'] .barket .player  .hands {
  bottom: 121/@rem;
  left: 56%;
  width: 2.2rem;
  height: 3.8rem;
  background-image: url(../../image/playPage/player-2/hands.svg);
}
[data-player = '2'] .barket .player  .body {
  bottom: 16/@rem;
  width: 2.2rem;
  height: 7.55rem;
  background-image: url(../../image/playPage/player-2/body.svg);
}
[data-player = '3'] .barket .player .legs {
  bottom: 0;
  width: 96/@rem;
  height: 130/@rem;
  background-image: url(../../image/playPage/player-3/legs.svg);
}
[data-player = '3'] .barket .player  .hands {
  bottom: 121/@rem;
  left: 56%;
  width: 96/@rem;
  height: 170/@rem;
  background-image: url(../../image/playPage/player-3/hands.svg);
}
[data-player = '3'] .barket .player  .body {
  bottom: 16/@rem;
  width: 96/@rem;
  height: 287/@rem;
  background-image: url(../../image/playPage/player-3/body.svg);
}
[data-player = '4'] .barket .player .legs {
  bottom: 0;
  width: 96/@rem;
  height: 130/@rem;
  background-image: url(../../image/playPage/player-4/legs.svg);
}
[data-player = '4'] .barket .player  .hands {
  bottom: 121/@rem;
  left: 56%;
  width: 96/@rem;
  height: 170/@rem;
  background-image: url(../../image/playPage/player-4/hands.svg);
}
[data-player = '4'] .barket .player  .body {
  bottom: 16/@rem;
  width: 96/@rem;
  height: 287/@rem;
  background-image: url(../../image/playPage/player-4/body.svg);
}
[data-player = '5'] .barket .player .legs {
  bottom: 0;
  width: 96/@rem;
  height: 130/@rem;
  background-image: url(../../image/playPage/player-5/legs.svg);
}
[data-player = '5'] .barket .player  .hands {
  bottom: 121/@rem;
  left: 56%;
  width: 96/@rem;
  height: 170/@rem;
  background-image: url(../../image/playPage/player-5/hands.svg);
}
[data-player = '5'] .barket .player  .body {
  bottom: 16/@rem;
  width: 96/@rem;
  height: 287/@rem;
  background-image: url(../../image/playPage/player-5/body.svg);
}
//animation
.playPage-wrap .ball-wrapper.prepare .ball {
  -webkit-animation: ball-prepare 0.5s ease;
  animation: ball-prepare 0.5s ease;
}
.playPage-wrap .ball-wrapper.prepare + .player .hands {
  -webkit-animation: hands-prepare 0.5s ease;
  animation: hands-prepare 0.5s ease;
}

.playPage-wrap .player.throw .body {
  -webkit-animation: throw-body 1s ease-out;
  animation: throw-body 1s ease-out;
}
.playPage-wrap .player.throw .legs {
  -webkit-animation: throw-legs 0.5s ease-out 0.5s;
  animation: throw-legs 0.5s ease-out 0.5s;
}
.playPage-wrap .barket .player.throw .hands {
  -webkit-animation: throw-hands 4s ease-out;
  animation: throw-hands 4s ease-out;
}

//animation
@-webkit-keyframes rotateZ30 {
  0% {
    -webkit-transform: rotateZ(-5deg);
  }
  100% {
    -webkit-transform: rotateZ(-30deg);
  }
}
@keyframes rotateZ30 {
  0% {
    transform: rotateZ(-5deg);
  }
  100% {
    transform: rotateZ(-30deg);
  }
}
@keyframes goal-p {
  0% {
    left: 30.4rem;
    transform: skew(0deg);
  }
  20% {
    left: 30.7rem;
    transform:  kew(22deg);
  }
  30% {
    left: 30.6rem;
    transform: skew(18deg);
  }
  40% {
    transform: kew(14deg);
  }
  50% {
    left: 30.5rem;
    transform: skew(10deg);
  }
  60% {
    left: 30.4rem;
    transform: skew(6deg);
  }
  70% {
    transform: skew(2deg);
  }
  80% {
    transform: skew(-4deg);
  }
  90% {
    transform: skew(2deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes goal-l {
    0% {
      transform: translate(29.28rem, 3.98rem) skew(0deg);
    }
    20% {
      transform: translate(29.5rem, 3.98rem) skew(22deg);
    }
    30% {
      transform: translate(29.45rem, 3.98rem) skew(18deg);
     }
    40% {
      transform: translate(29.4rem, 3.98rem) skew(14deg);
    }
    50% {
      transform: translate(29.36rem, 3.98rem) skew(10deg);
    }
    60% {
      transform: translate(29.32rem, 3.98rem) skew(6deg);
    }
    70% {
      transform: translate(29.28rem, 3.98rem) skew(2deg);
    }
    80% {
      transform: translate(29.28rem, 3.98rem) skew(-4deg);
    }
    90% {
      transform: translate(29.28rem, 3.98rem) skew(2deg);
    }
    100% {
      transform: translate(29.28rem, 3.98rem) skew(0deg);
    }
}

@-webkit-keyframes goal-l {

}
@keyframes rotateY180{
  0% {
    //-moz-transform: rotateY(0deg);
    //-ms-transform: rotateY(0deg);
    //-o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes rotateY180{
  0% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
  }
}

@keyframes rotateZ360 {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes rotateZ360{
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}
